<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '更换联系方式',
  },
}
</route>

<template>
  <view class="bg-white" :class="[{ 'dark-color': themeConfig.theme === 'dark' }]">
    <view class="w-center py-32rpx font-size-26rpx">请输入能联系到你的11位手机号码</view>
    <wd-form ref="formRefs" :model="formData" :errorType="errorType">
      <wd-input 
        align-left 
        type="number" 
        label="手机号码" 
        label-width="80px"
        prop="phone"
        v-model="formData.phone" 
        placeholder="请输入你要更换的手机号码" 
        :rules="[{ required: true, message: '请输入你要更换的手机号码！' }]"
      />
      <view class="border-1px"></view>
      
      <!-- 验证码 -->
      <view class="bg-white h-100rpx rd-100rpx pr-12rpx flex-sb-center"
        :class="[{ 'dark-color2': themeConfig.theme === 'dark' }]"
      >
        <view class="h-full flex-center">
          <wd-input
            label="验证码"
            label-width="80px"
            prop="code"
            clearable
            v-model="formData.code"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          />
        </view>
        <view class="w-160rpx h-full flex-center" @click="sendCode">
          <wd-text v-if="status === 'normal'" text="获取验证码" color="#986DF0" size="26rpx"></wd-text>
          <wd-text v-else-if="status === 'sending'" text="发送中..." color="#986DF0" size="26rpx"></wd-text>
          <wd-count-down v-if="status === 'finish'" :time="time" format="ss 秒" @finish="onFinish" />
        </view>
      </view>
      <view class="border-1px"></view>
    </wd-form>
    <view class="w-center py-32rpx font-size-26rpx">你的联系方式仅用于对方联系你使用，平台将严格保密。</view>
    
    <!-- 保存按钮 -->
    <view class="btn-full w-center pt-40rpx">
      <wd-button 
        class="btn-w-full btn-h-78"
        :loading="loading"
        @click="submit"
      >保存</wd-button>
    </view>
  </view>
</template>
  
<script lang="ts" setup>
import { AliyunsmsSendSms } from '@/service/db_index';
import { ConcatPhone } from '@/service/db_user';
import { useThemeStore, useUserStore } from '@/store';
import { useToast } from 'wot-design-uni';

// 主题颜色
const { themeConfig } = useThemeStore();
const user = useUserStore();
const toast = useToast();

const formData = reactive({
  userId: '',
  phone: '',
  code: '',
})

const formRefs = ref();
const errorType = ref<"message" | "toast" | "none">('toast');

const submit = () => {
  formRefs.value
    .validate()
    .then(({ valid }) => {
      if (!valid) return;
      
      const data = {
        ...formData,
        userId: user.userInfo.id,
      }
      concatPhone(data);
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}


const status = ref('normal');
const countDownTime = 60 * 1000;
const time = ref<number>(countDownTime);

/** 发送验证码 */
const sendCode = async () => {
  try {
    if (status.value !== 'normal') return;
    if (!formData.phone) return toast.show('请填写手机号！');
    
    status.value = 'sending';
    await AliyunsmsSendSms({
      phoneNum: formData.phone
    })
    status.value = 'finish';
    toast.show('发送成功！');
    uni.hideLoading();
  } catch (error) {
    status.value = 'normal';
    console.log(error)
  }
}

/** 倒计时结束 */
const onFinish = () => {
  time.value = countDownTime;
  status.value = 'normal';
}

const loading = ref(false);
// 关联手机号
const concatPhone = async(data) => {
  try {
    loading.value = true;
    const res = await ConcatPhone(data);
    loading.value = false;
    if (res.code != 200) {
      return toast.show(res.message);
    }
    toast.show('保存成功!');
    user.getUserInfo();

    setTimeout(() => {
      uni.navigateBack();
    }, 1000);
  } catch (error) {
    loading.value = false;
    console.log(error)
  }
}

onShow(() => {
  nextTick(() => {
    // 设置页面标题
    themeConfig.title = '更换联系方式';
  })
})
</script>

<style lang="scss" scoped>
</style>
